webpack plugin 使用

plugin使用

在项目构建时, 我们可能会有打包之外的其他需求, 那么plugin可以帮我们来完成

package.json

• 要使用插件, 首先就得安装他们, 一般会把项目的依赖记录在该文件中
• 所以, 在使用插件之前, 先创建package.json这个文件: npm init -y

webpack

• 插件在运行时依赖与webpack, 要在项目本地安装它
• 本地安装命令: npm i webpack -D, 这里-D参数是–save-dev的简写

html-webpack-plugin

简介

• 这是webpack一款用于处理html的插件

安装

• npm i html-webpack-plugin -D

使用

• 这里用它自动把打包后的js脚本注入到指定的html文件中
• 这样就不用手动编写script标签引入打包后的文件了

配置

• 在webpack.config.js文件中
• 首先导入html-webpack-plugin插件
• 然后创建实例配置到plugins配置项中

const HtmlWP = require('html-webpack-plugin');

module.exports = {
    // 插件配置
    plugins: [
        new HtmlWP({
            template: 'src/index.html',    // 源代码文件名
            filename: 'index.html',        // 处理后的文件名
            inject: 'body',                // 脚本自动插入的位置
            minify:{ // 压缩优化HTML页面
                collapseWhitespace:true,   // 合并空白字符
                removeComments:true,       // 移除注释
                removeAttributeQuotes:true // 移除属性上的引号
            }
        })
    ]
};

clean-webpack-plugin

简介

• 用于清除目录垃圾文件

安装

• 脚本：npm i clean-webpack-plugin -D

使用

• 这里用它在打包之前先清除掉dist目录, 防止多次打包后生成过多的垃圾文件

webpack配置

• 在webpack.config.js文件中
• 首先导入clean-webpack-plugin插件
• 然后创建实例配置到plugins配置项中

const CleanWP = require('clean-webpack-plugin');

module.exports = {
    // 插件配置
    plugins: [
      new CleanWP(['dist'])  // 每次打包前先清除dist目录
    ]
};

uglifyjs-webpack-plugin

简介

• 用于压缩混淆js

安装

• npm i uglifyjs-webpack-plugin -D

配置

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    // 插件配置
    plugins: [
		new UglifyJsPlugin({
            parallel: 4,
            uglifyOptions: {
                output: {
                    comments: false,
                    beautify: false,
                },
                compress: {
                    warnings: false
                },
            },
            cache: true,
        })
    ]
};

optimize-css-assets-webpack-plugin

简介

• 用于压缩css

安装

• npm i optimize-css-assets-webpack-plugin -D

配置

// 引入插件
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

// 配置插件
plugins: [
    new OptimizeCssAssetsPlugin()
}

babel-plugin-dynamic-import-node

简介

• babel 的插件，可以使用 import 语法来动态的引入所需文件

安装

• npm i babel-plugin-dynamic-import-node -D

配置

在 .babelrc 中配置

{
  "plugins": ["dynamic-import-node"]
}

使用

let place = 'guangzhou'
import("../../../assets/maps/json/guangdong/" + place + ".json").then(jsonData => {
      echarts.registerMap(place, jsonData);
      myChart.setOption(option);
    }
);

webpack-bundle-analyzer

可以将打包后的内容束展示为方便交互的直观树状图

vue-cli 自带该插件，直接运行

$ npm run build --report

浏览器访问 http://127.0.0.1:8888

待续

webpack.optimize.CommonsChunkPlugin

extract-text-webpack-plugin